<template>
	<div class="w-page w-infoopen">
		<!-- 头部 -->
		<Header navNum="6" @isSearch='isSearch'></Header>
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<!-- 左侧 -->
						<Leftcard class="w-card-left shrink0" :isBackHome="isBackHome" :menuList="menuList" :columnName="columnName" :deAcBig="acBig" @aa="out"></Leftcard>
						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
									<el-breadcrumb-item :to="{}"><span @click="acBig = '0'; isBackHome = true">{{ columnName }}</span></el-breadcrumb-item>
									<el-breadcrumb-item :to="{}"><span @click="isdetail = 0">{{ title }}</span></el-breadcrumb-item>
									<el-breadcrumb-item v-if="isdetail == 1">详情</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-mainhtml" v-if="isdetail == 0">
								<div class="w-tabtitle">{{title}}</div>
								<div v-if="List.length>0">
									<div class="w-con">
                    <div class="w-commonList">
                      <ul class="w-tabul">
                        <li v-for="(v,i) in List" :key="i" @click="getDetail(v.id)">
                          <div class="w-a flex hs vc">
                            <p class="dian shrink0"></p>
                            <p class="w-text ellipsis">
                              <span>{{ v.con }}</span>
                            </p>
                          </div>
                          <div class="w-time">
                            <span>{{ v.createTime.split(' ')[0] }}</span>
                          </div>
                        </li>
                      </ul>
                    </div>
<!--										<CommonList :List="List" @sendId='sendId'></CommonList>-->
										<el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
										 :total="total">
										</el-pagination>
									</div>
								</div>
								<div v-else>
									<div class="w-con">暂无</div>
								</div>
							</div>
							<!-- 详情开-->
							<detailPage class="w-detail" :info='info' v-if="isdetail==1"></detailPage>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部开始 -->
		<Footer></Footer>
		<!-- 底部结束 -->
	</div>
</template>

<script>
	import detailPage from "./common/detail"
	import {
		articleClassList,
		articleDetail
	} from '@/api/article'
	export default {
		components: {
			"detailPage": detailPage
		},
		data() {
			return {
				columnName: '信息公开',
				acBig: '',
				title: '',
				menuList: [
				  {
						id: 1,
						name: '年度工作报告',
						ischildren: false,
						apiId: 13,
					},
					{
						id: 2,
						name: '财务审计报告',
						ischildren: false,
						apiId: 14,
					},
					// {
					// 	id: 3,
					// 	name: '关联方关系及其财务报告',
					// 	ischildren: false,
					// 	apiId: 21,
					// },
					{
						id: 3,
						name: '财务报告',
						ischildren: false,
						apiId: 15,
					},
					{
						id: 4,
						name: '年度捐赠收入和支出',
						ischildren: false,
						apiId: 22,
					},
					{
						id: 5,
						name: '基金会刊物及年报',
						ischildren: false,
						apiId: 23,
					}
				],
				// 列表
				List: [],
				size: 10,
				page: 1,
				total: 0,
				classId: 0,
				// 详情
				isdetail: 0,
				info: {},
				isSearchList: false,
        isBackHome: false
			};
		},

    beforeCreate() {
    },

		created() {
			this.isSearch()
      if (this.$route.query.deAcBig) {
        this.acBig = this.$route.query.deAcBig.toString()
        this.classId = this.menuList[this.acBig - 1].apiId

        this.changeMenu()
      } else {
        this.classId = this.menuList[0].apiId
      }
			this.getList()
		},

    watch: {
      $route () {
        this.acBig = this.$route.query.deAcBig
        this.out(JSON.stringify({
          acBig: this.acBig,
          acSml: ''
        }))

        this.changeMenu()
      }
    },

		methods: {
			isSearch(data){
				console.log(data)
				this.isSearchList = data
			},
			getList() {
				articleClassList({
					classId: this.classId,
					size: this.size,
					page: this.page,
				}).then(response => {
					this.List = response.data.list
					this.total = response.data.total
					this.List.forEach(v => {
						v.con = v.title
					})
				})
			},
			out(data) {
        var _this = this;
        if (data) {
					_this.page = 1
					_this.isdetail = 0
					let cacheData = JSON.parse(data)
					_this.acBig = cacheData.acBig.toString()

          _this.$router.replace({
            path: '/infoOpen',
            query: {
              deAcBig: parseInt(_this.acBig)
            }
          }).catch(err => {})
				}
        this.isBackHome = false
			},

      changeMenu() {
        let _this = this

        _this.menuList.forEach(item => {
          if (parseInt(item.id) === parseInt(_this.acBig)) {
            _this.title = item.name

            _this.classId = item.apiId
          }
        });
        _this.getList()
      },

			// 分页
			handleCurrentChange(currentPage) {
				this.page = currentPage
				this.getList()
			},
			sendId(data) {
				if (data) {
					console.log(data)
					this.isdetail = 1
					articleDetail({
						id: data,
					}).then(response => {
						this.info = response.data
					})
				}
			},
      getDetail(id){
        this.info = {}
        this.isdetail = 1

        articleDetail({
          id: id,
        }).then(response => {
          this.info = response.data
        })
      }
		}
	};
</script>

<style scoped>
  /* li */
  .w-tabul {
    margin-bottom: 30px;
    box-sizing: border-box;
    min-height: 24.5vh;
  }

  .w-tabul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1PX dotted #999;
    cursor: pointer;
  }

  .w-tabul .w-time {
    font-size: 16px;
    color: #333333;
  }

  .w-tabul .w-a {
    width: 75%;
    font-size: 16px;
    color: #333333;
    padding: 18px 0 18px 9px;
    box-sizing: border-box;
  }

  .w-tabul .dian {
    width: 6px;
    height: 6px;
    background: rgba(102, 102, 102, 1);
    border-radius: 50%;
    margin-right: 13px;
  }

  .w-text {
    width: calc(90% - 70px);
  }
</style>

<style scoped>
	/* 详情 */
	.w-tabcon p {
		text-indent: 30px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		text-align: justify;
	}

	.w-tabcon img {
		display: block;
		max-height: 334px;
		max-width: 420px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 40px;
	}
</style>
<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}

	.w-card-left {
		width: 26%;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	/* 面包屑 */
	.w-infoopen .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-infoopen .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-infoopen.el-breadcrumb__inner a:hover,
	.el-breadcrumb__inner.is-link:hover {
		color: #692324;
	}

	.w-infoopen .el-pager li {
		border: 1PX solid #9C9A9B;
		margin: 0 7px;
		font-size: 14px;
		font-weight: 300;
		border-radius: 3px;
	}

	.w-infoopen .el-pager li.active+li {
		border: 1PX solid #9C9A9B;
	}

	.w-infoopen .el-pager li.active {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-infoopen .el-pager li:hover {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-infoopen .el-pagination {
		text-align: center;
	}
</style>
